<template>
	<cl-select-table
		v-model="value"
		:title="t('选择订单信息')"
		:service="service.order.order"
		:columns="columns"
		:multiple="multiple"
		:dict="{ text: 'username' }"
		pickerType="text"
	/>
</template>

<script setup lang="ts">
defineOptions({
	name: "order-order-select",
});

import { useCool } from "/@/cool";
import { useI18n } from "vue-i18n";
import { CrudProps } from "/#/crud";
import { reactive, ref, useModel } from "vue";

const props = defineProps({
	...CrudProps,
	modelValue: null,
	multiple: Boolean,
});

const { service } = useCool();
const { t } = useI18n();

const value = useModel(props, "modelValue");

// 选项
const options = reactive({
	payStatus: [
		{ label: t("待支付"), value: 0 },
		{ label: t("已支付"), value: 1 },
		{ label: t("支付失败"), value: 2 },
		{ label: t("已退款"), value: 3 },
	],
	deliveryStatus: [
		{ label: t("待发货"), value: 0 },
		{ label: t("已发货"), value: 1 },
		{ label: t("运输中"), value: 2 },
		{ label: t("已签收"), value: 3 },
		{ label: t("退货中"), value: 4 },
		{ label: t("已退货"), value: 5 },
	],
	payType: [
		{ label: t("微信支付"), value: 0 },
		{ label: t("支付宝"), value: 1 },
		{ label: t("银行卡"), value: 2 },
		{ label: t("其他"), value: 3 },
	],
});

const columns = ref([
	{
		label: t("头像"),
		prop: "avatarUrl",
		minWidth: 100,
		component: { name: "cl-image", props: { size: 60 } },
	},
	{ label: t("昵称"), prop: "userNickName", minWidth: 140 },
	{ label: t("昵称"), prop: "sysNickName", minWidth: 140 },
	{ label: t("用户名"), prop: "username", minWidth: 140 },
	{ label: t("订单号"), prop: "orderNo", minWidth: 140 },
	{
		label: t("支付状态"),
		prop: "payStatus",
		minWidth: 120,
		dict: options.payStatus,
	},
	{
		label: t("物流状态"),
		prop: "deliveryStatus",
		minWidth: 120,
		dict: options.deliveryStatus,
	},
	{
		label: t("支付方式"),
		prop: "payType",
		minWidth: 120,
		dict: options.payType,
	},
	{
		label: t("微信支付码"),
		prop: "wechatPayCode",
		minWidth: 100,
		component: { name: "cl-image", props: { size: 60 } },
	},
	{
		label: t("支付截图"),
		prop: "payScreenshot",
		minWidth: 100,
		component: { name: "cl-image", props: { size: 60 } },
	},
	{
		label: t("总金额"),
		prop: "totalAmount",
		minWidth: 140,
		sortable: "custom",
	},
	{
		label: t("备注"),
		prop: "remark",
		showOverflowTooltip: true,
		minWidth: 200,
	},
]);
</script>
